<template>
	<view>
		<u-navbar :is-back="true" title="快捷回复" title-color="white" :background="{backgroundColor: '#00a8ff'}"
			:border-bottom="false">
			<!-- <view class="navbar-right" slot="right" style="padding-right: 20rpx;color: #FFFFFF;" @click="manage()">
				管理
			</view> -->
		</u-navbar>
		<view class="u-p-15 u-font-12" style="background-color: #f3f4f5;color: #b2b2b2;">
			已建分组（{{indexList.length}}/30）
		</view>
		<view class="" style="padding: 0rpx 26rpx;">
			<u-cell-group>
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in indexList" :key="item.id"
					@click="click" @open="open" :options="options">
					<u-cell-item :title="item.title" :value="item._count"
						@click="openinfo('/pages/tabBar/my/fastReply/fastReplyList/fastReplyList?id='+item.id)">
					</u-cell-item>
				</u-swipe-action>
			</u-cell-group>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="80%" :mask-close-able="false">
			<view class="u-p-60">
				<input type="text" v-model="a" class="u-m-30" value="" placeholder="请输入新的分组名" />
				<u-button type="primary" class="u-m-b-30" @click="save()">保存</u-button>
			</view>

		</u-popup>
		<buttonContent @aClick="add" txt="+ 添加分组"></buttonContent>
	</view>
</template>

<script>
	import buttonContent from '@/components/custom/buttonContent.vue'
	export default {
		components: {
			buttonContent
		},
		data() {
			return {
				options: [{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},
					{
						text: '编辑',
						style: {
							backgroundColor: '#4ccfff'
						}
					}
				],
				// 分组名，用完初始化
				id: '',
				a: '',
				show: false,
				indexList: []
			}
		},
		onShow() {
			this.getIndexList();
		},
		methods: {
			// 快捷分组回复列表
			getIndexList() {
				this.$apiCase.quIindex({}).then((res) => {
					console.log("res.data: ", res.data.data);
					this.indexList = res.data.data;
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			del(id) {
				this.$apiCase.quIdel({
					id: id
				}).then((res) => {
					console.log("res.data: ", res.data.code);
					if (res.data.code == 1) {
						uni.showToast({
							title: '删除成功'
						})
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},

			save() {
				// 保存操作
				if (this.a != '') {
					this.$apiCase.quIedit({
						id: this.id,
						title: this.a
					}).then((res) => {
						console.log("res.data: ", res.data.code);
						if (res.data.code == 1) {
							uni.showToast({
								title: '编辑成功'
							})
						}
						this.a == '';
					}).catch((err) => {
						console.log('request fail', err);
					})
				}
				setTimeout(() => {
					this.show = false;
				}, 2000)
				this.getIndexList();

			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			click(index, index1) {
				console.log(this.indexList[index].id);
				if (index1 == 0) {
					this.del(this.indexList[index].id)
					this.indexList.splice(index, 1);
				} else {
					console.log("点击了编辑");
					console.log(this.indexList[index].title);
					this.id = this.indexList[index].id;
					this.show = true;
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效

				this.indexList[index].show = true;
				this.indexList.map((val, idx) => {
					if (index != idx) this.indexList[idx].show = false;
				})
			},
			add(res) {
				console.log(res);
				console.log("点击了添加分组");
				this.openinfo('/pages/tabBar/my/fastReply/addgrounp');
			},
			manage() {
				console.log("管理");
				this.openinfo('/pages/tabBar/my/fastReply/manage');
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
